<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="鲸鱼">
	<title>营销分析-更多分析</title>
	<link rel="stylesheet" href="css/daterangepicker.css">
	<link rel="stylesheet" href="css/style.css">

  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="js/highcharts-5.0.12.js"></script>
  <script type="text/javascript" src="js/common.js"></script>
  <script type="text/javascript" src="js/data.js"></script>
  <script type="text/javascript" src="js/table/jquery.table2excel.js"></script>

	<style>
		.search-area .date{margin-left: 0;}
		.search-area .date .searchBox{text-indent: 5px;text-align: left;color: #666;margin-left: 20px;font-size: 12px;}
		.searchBox::-webkit-input-placeholder { color:#666;font-family: "微软雅黑";}
		.searchBox:-moz-placeholder { color:#666;font-family: "微软雅黑";}
		.searchBox::-moz-placeholder { color:#666;font-family: "微软雅黑";}
		.searchBox:-ms-input-placeholder { color:#666;font-family: "微软雅黑";}
    .more-tabs>li>div{
      overflow-y: scroll;
      position: absolute;
      top:50px;
      left: 0%;
      padding: 20px;
      height: 450px;
      width: 94%;
    }
    .sexAgeBox{
      height: 275px;
    }
    .more-tabs>li>div>div{
      margin-bottom: 10px;
      box-sizing: content-box;
      border: 1px solid #ccc0da;
      margin-top: 0px !important;
    }
    .more-tabs>li>div>div:nth-child(2){
      height: 360px;
    }
    .image-analysis>div {
      position: relative;
    }
    .image-analysis p{
      position: absolute;
      left: -20px;
      top: 0px;
      width: 220px;
      z-index: 2;
      word-wrap: break-word;
      padding: 0 20px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: #4dbbea;
      color: #fff;
      margin-top: 10px;
      margin-left: -10px;
      display: inline-block;
    }
    #inSexAgeContainer{
      padding-top: 2px;
      height: 95% !important;
      float: left;
    }
    .tablediv{
      display: inline-block;
      vertical-align: top;
    }
    .inSexAgeTableBox{
      float: right;
      margin-right: 50px;

    }
    #datatable, #datatable2 {
      border: 1px solid #ccc;
      border-collapse: collapse;
      border-spacing: 0;
      font-size: 12px;
    }
    .table{
      border: 1px solid #ccc;
      border-collapse: collapse;
      border-spacing: 0;
      font-size: 12px;
    }
    #datatable2{
      margin-right: 20px;
    }
    #datatable2  td, #datatable2 th{
      padding: 0px 3px;
    }
    td,th {
      line-height: 25px;
      border: 1px solid #ccc;
      padding: 0px 17px;
      text-align: center;
    }
    #container{
      padding-top: 2px;
      height: 98% !important;
      width: 54%;
      float: left;
    }
    #export{
      overflow: hidden;
      font-size: 15px;
      line-height: 18px;
      color: #4dbbea;;
    }
    #table{
      font-size: 15px;
    }
    thead th{
      background-color: #f0f0f0;
    }

     .loading{
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 9;
      transform: translate3d(-50%, -50%, 0);
      height: 120px;
    }
    .more-warp {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
      width: 600px;
      height: 380px;
      background: inherit;
      background-color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(204, 204, 204, 1);
      border-radius: 0px;
      -moz-box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.2);
      -webkit-box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.2);
      box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.2);
      background-color: #f5f5f5;
    }
    .more-warp-main{
      height: 50px;
      border-bottom: 1px solid rgba(228, 228, 228, 1);
      background: #fff;
    }
    .more-warp-main span{
      padding-left: 15px;
      font-size: 18px;
      font-weight: bold;
      line-height: 50px;
    }
    .from{
      padding-top: 30px;
    }
    .from-item{
      width: 300px;
      margin: 0 auto;
    }
    .more-warp-btn{
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: #fff;
      border-top: 1px solid rgba(228, 228, 228, 1);
    }
    .more-warp .x {
      float: right;
      padding: 0px 20px;
      font-size: 17px;
      font-weight: bold;
      cursor: pointer;
      border: 1px solid rgba(228, 228, 228, 1);
    }
    .more-warp .x:active {
      background: rgba(102, 102, 102, 1);
      color: #fff;
    }
    .more-warp .from-item input{
      width: 310px;
      height: 35px;
      font-family: 'Arial Normal', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 13px;
      text-decoration: none;
      color: #000000;
      text-align: left;
    }
    .from-item p {
      line-height: 20px;
    }
    #msg{
      font-size: 24px;
      color: red;
    }
	</style>
</head>
<body>
  
	<div class="moreBox">
    
    <!--遮罩层-->
    <div id="make-lightbox" style="position: fixed; left: 0px; top: 0px; width: 10000px; height: 10000px; background-color: rgb(255, 255, 255); opacity: 0.8; "></div>
    <div class="more-warp">
      <div class="more-warp-main">
        <span>修改密码</span>
        <!--<h6 class="x close" >X</h6>-->
      </div>
      <div class="from">
        <div class="from-item">
        <p><span style="color:#FF0000;">＊</span><span>原密码：</span></p><input
            class="oldPsw"
            type="password"
            style="color: rgb(153, 153, 153);"
            maxlength="16"
            onKeyUp="value=value.replace(/[^\x00-\xff]/g,'')"
        >
        </div>
        <div class="from-item">
          <p><span style="color:#FF0000;">＊</span><span>新密码：</span></p><input
            class="newPsw"
            type="password"
            style="color: rgb(153, 153, 153);"
            maxlength="16"
            onKeyUp="value=value.replace(/[^\x00-\xff]/g,'')"
        >
        </div>
        <div class="from-item">
          <p><span style="color:#FF0000;">＊</span><span>确认密码：</span></p><input
            class="newPswR"
            type="password"
            style="color: rgb(153, 153, 153);"
            maxlength="16"
            onKeyUp="value=value.replace(/[^\x00-\xff]/g,'')"
        >
        </div>
        <div class="from-item hide" id="msg"></div>
      </div>
      <div class="more-warp-btn">
        <a href="javascript:;" class="x baocun" >保存</a>
        <a href="javascript:;" class="x close">取消</a>
      </div>
    </div>
	</div>
</body>

<script>



  $(function(){

    $('.close').click(function () {
      $(window.parent.close())
    })

    $('.baocun').click(function () {

      var oldPsw = $('.oldPsw').val()
      var newPsw = $('.newPsw').val()
      var newPswR = $('.newPswR').val()
      console.log(newPsw)
      console.log(newPswR)
      var regPws = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
      if (oldPsw == '' || oldPsw == null || newPsw == '' || newPsw == null || oldPsw == '' || oldPsw == null  ) {
        msgShow('密码不能为空')
        return false;
      }   else if ((!regPws.test(newPsw)) || (!regPws.test(newPswR))) {
        msgShow('密码格式错误')
        return false;
      } else if (!(newPsw == newPswR) ) {
        msgShow('密码不一致')
        return false;
      }

      $.ajax({
        type : "GET",  //请求方式
        url : "./json/a.json",  //请求路径
        traditional: true,
        data : {},
        dataType: "json",
        success : function(msg) {
          msgShow(msg)
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
          msgShow(textStatus)
        }
      })
    })
  });

  var play = null;
  function msgShow(msg) {
    console.log(msg)
    clearTimeout(play)
    $('#msg').text(msg).show()

    play = setTimeout(function () {
      $('#msg').hide()
    }, 2000)
  }

</script>
</html>
